import React, { useEffect, useState } from 'react';
import { Form, Input, Checkbox, Button, MessagePlugin, Radio, Select, Table, Space, Tag, Link, } from 'tdesign-react';
import type { FormProps, IsDateOptions, FormRules, Data } from 'tdesign-react';
import 'tdesign-react/es/style/index.css'; // 少量公共样式
import './prescripttion.css'
import { } from 'tdesign-react';
import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-react';
import type { TableProps } from 'tdesign-react';
import axios from 'axios';
axios.defaults.baseURL = 'http://127.0.0.1:3000/zlq'

const { FormItem } = Form;

const rules: FormRules<Data> = {
    grug_name: [
        { required: true, message: '请填写处方名称' },
        { min: 2, message: '至少需要两个字符，一个中文等于两个字符' },
        { max: 10, message: '姓名字符长度超出' },
    ],
    cate: [
        { required: true, message: '请填写处方类型' },
    ],
    permission: [
        { required: true, message: '请填写处方权限' },
    ],
    owner: [
        { required: true, message: '请填写拥有者' },
    ],
    remark: [
        { required: true, message: '请填写处方备注' },
    ],
};

const courseOptions = [
    { label: '语文', value: '1' },
    { label: '数学', value: '2' },
    { label: '英语', value: '3' },
    { label: '体育', value: '4' },
];

const options = [
    { label: '计算机学院', value: '1' },
    { label: '软件学院', value: '2' },
    { label: '物联网学院', value: '3' },
];

export default function BaseForm() {
    const [drugList,setDrugList] = useState([])
    const [cateList,setCateList] = useState([])
    const [permissionList,setPermissionList] = useState([])

    const getDrug=async()=>{
        let {data:{code,zhongList}} = await axios.get('/zhongList')
        if(code == 200){
            setDrugList(zhongList)
        }
    }

    useEffect(()=>{
        getDrug()
        console.log(drugList);
        
    },[])
    const [form] = Form.useForm();

    const onSubmit: FormProps['onSubmit'] = ({ validateResult, firstError }) => {
        if (validateResult === true) {
            MessagePlugin.success('提交成功');
        } else {
            console.log('Errors: ', validateResult);
            //   MessagePlugin.warning(firstError);
        }
    };

    const onReset = () => {
        MessagePlugin.info('重置成功');
    };

    const handleClear = () => {
        form.clearValidate();
    };

    // 清除指定字段的校验结果
    const clearFieldsValidateResult = () => {
        form.clearValidate(['email', 'course', 'content.url']);
        MessagePlugin.success('已清除邮箱、课程、个人网站等字段校验结果');
    };

    const [medicine, setMedicine] = useState(['ABCD', 'SEFA', 'HNSA']);
    const [drug, setDrug] = useState(['阿莫西林', '红霉素', '板蓝根']);
    const [specification, setSpecification] = useState(['10mg*100片', '15mg*50片', '5mg*100片']);
    const [dose, setDose] = useState(['a', 'b', 'c']);
    const [drug_num, setDrug_num] = useState(['10mg*100片', '15mg*50片', '5mg*100片']);
    const [drug_day, setDrug_day] = useState(['10mg*100片', '15mg*50片', '5mg*100片']);
    const [signetur, setSignetur] = useState(['10mg*100片', '15mg*50片', '5mg*100片']);
    const [quantity, setQuantity] = useState(['10mg*100片', '15mg*50片', '5mg*100片']);
    const [drug_price, setDrug_price] = useState(['10mg*100片', '15mg*50片', '5mg*100片']);
    const [notes, setNotes] = useState(['', '', '']);

    const arr = () => {
        setMedicine([])
        setDrug([])
        setSpecification([])
        setDose([])
        setDrug_num([])
        setDrug_day([])
        setSignetur([])
        setQuantity([])
        setDrug_price([])
        setNotes([])
    }

    // 假设你的表格数据是一个对象数组，存储药品相关的信息
    const data = [];
    for (let i = 0; i < 3; i++) {
        data.push({
            index: i + 1,
            id: i + 1,
            medicine: medicine[i],
            drug: drug[i],
            specification: specification[i],
            dose: (
                <input
                    style={{ border: "0px" }}
                    value={dose[i]} // 绑定对应的 dose 项
                    onChange={(e) => {
                        const newDose = [...dose]; // 创建 dose 数组的副本
                        newDose[i] = e.target.value; // 更新对应索引的值
                        setDose(newDose); // 更新 dose 数组
                    }}
                />
            ),
            drug_num: (
                <select
                    style={{ border: "0px" }}
                    value={drug_num[i]} // 绑定选中的值
                    onChange={(e) => {
                        const newDrugNum = [...drug_num]; // 创建 drug_num 数组的副本
                        newDrugNum[i] = e.target.value; // 更新对应索引的值
                        setDrug_num(newDrugNum); // 更新 drug_num 数组
                    }}
                >
                    {/* 渲染下拉框选项 */}
                    <option value="10mg*100片">10mg*100片</option>
                    <option value="15mg*50片">15mg*50片</option>
                    <option value="5mg*100片">5mg*100片</option>
                </select>
            ),
            drug_day: <input
                style={{ border: "0px" }}
                value={drug_day[i]}
                onChange={(e) => {
                    const newDrug_day = [...drug_day]
                    newDrug_day[i] = e.target.value
                    setDrug_day(newDrug_day)
                }} />,
            signetur: <select
                style={{ border: "0px" }}
                value={signetur[i]}
                onChange={((e) => {
                    const newSignetur = [...signetur]
                    newSignetur[i] = e.target.value
                    setSignetur(newSignetur)
                })}>
                <option value="10mg*100片">10mg*100片</option>
                <option value="5mg*10片">5mg*10片</option>
                <option value="20mg*30片">20mg*30片</option>
            </select>,
            quantity: <input
                style={{ border: "0px" }}
                type='text'
                value={quantity[i]}
                onChange={(e) => {
                    const newQuantity = [...quantity]
                    newQuantity[i] = e.target.value
                    setQuantity(newQuantity)
                }} />,
            drug_price: drug_price[i],
            notes: <input
                style={{ border: "0px" }}
                value={notes[i]}
                onChange={(e) => {
                    const newNotes = [...notes]
                    newNotes[i] = e.target.value
                    setNotes(newNotes)
                }} />,
        });
    }

    const [tableLayout, setTableLayout] = useState<TableProps['tableLayout']>('fixed');
    const [fixedTopAndBottomRows, setFixedTopAndBottomRows] = useState(false);

    return (
        // <div>
        //     {
        //         drugList.map((item)=>{
        //             return(
        //                 <div>
        //                     {item.grug_name}
        //                     {item.cate}
        //                     {item.permission}
        //                     {item.owner}
        //                     {item.remark}
        //                     {item.medicine}
        //                     {item.drug}
        //                 </div>
        //             )
        //         })
        //     }
        // </div>
        <Form form={form} rules={rules} onReset={onReset} onSubmit={onSubmit} scrollToFirstError="smooth" className='form'>
            <FormItem label="处方名称:" name="grug_name">
                <Input />
            </FormItem>
            <FormItem label="处方类型:" name="cate">
                {
                    <Select clearable>
                        {courseOptions.map((item, index) => (
                            <Select.Option value={item.value} label={item.label} key={index} />
                        ))}
                    </Select>
                }
            </FormItem>
            <FormItem label="处方权限:" name="permission">
                {
                    <Select clearable>
                        {options.map((item, index) => (
                            <Select.Option value={item.value} label={item.label} key={index} />
                        ))}
                    </Select>
                }
            </FormItem>
            <FormItem label="拥有者" name="owner" initialData="">
                <Input />
            </FormItem>
            <FormItem label="处方备注" name="remark">
                <Input />
            </FormItem>
            <Table
                data={data}
                footData={[{}]}
                tableLayout={tableLayout}
                maxHeight={fixedTopAndBottomRows ? 500 : 300}
                fixedRows={fixedTopAndBottomRows ? [2, 2] : undefined}
                bordered
                columns={[
                    { colKey: 'id', title: '序号', width: 100, foot: '-' },
                    { colKey: 'medicine', title: '药品编码', width: 100, foot: '-' },
                    { colKey: 'drug', title: '药品名称', width: 100, foot: '-' },
                    { colKey: 'specification', title: '药品规格', width: 100, foot: '-' },
                    { colKey: 'dose', title: '单词剂量', width: 100, foot: '-' },
                    { colKey: 'drug_num', title: '用药次数', width: 100, foot: '-' },
                    { colKey: 'drug_day', title: '用药天数', width: 100, foot: '-' },
                    { colKey: 'signetur', title: '药品用法', width: 100, foot: '-' },
                    { colKey: 'quantity', title: '发药数量', width: 100, foot: '-' },
                    { colKey: 'drug_price', title: '药品单价', width: 100, foot: '-' },
                    { colKey: 'notes', title: '备注', width: 100, foot: '-' },
                ]}
                rowKey="index"
                lazyLoad
            />
            <FormItem style={{ marginLeft: 100,marginTop:50, }}>
                <Button theme="default" variant="base" onClick={() => { arr() }} style={{ marginRight: 10 }}>
                    重置表格
                </Button>
                <Button theme="primary" type="submit" style={{ marginRight: 10 }}>
                    保存
                </Button>
            </FormItem>
        </Form>
    );
}
